<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 头部区域 -->
    <header>
        <div class="bgc"></div>
        <p>
            澳洲
            <span class="iconfont icon-arrow_down"></span>
        </p>
        <div class="search">
            <span class="iconfont icon-search"></span>
            <input type="text" placeholder="店铺/品类/商圈">
        </div>
    </header>
    <!-- 内容区域 -->
    <div class="banner">
        <div class="pic"><img src="./images/banner.png" alt=""></div>
        <ul>
            <li>
                <a href="#">
                    <img src="./images/icon1.png" alt="">
                    <p>美食外卖</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/icon1.png" alt="">
                    <p>美食外卖</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/icon1.png" alt="">
                    <p>美食外卖</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/icon1.png" alt="">
                    <p>美食外卖</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/icon1.png" alt="">
                    <p>美食外卖</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/icon1.png" alt="">
                    <p>美食外卖</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/icon1.png" alt="">
                    <p>美食外卖</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/icon1.png" alt="">
                    <p>美食外卖</p>
                </a>
            </li>
        </ul>
    </div>
    <div class="son">
                <!-- 销售区 -->
                <div class="sales w">
                    <!-- 导航 -->
                    <div class="navigation">
                        <h3>新品推荐</h3>
                        <p>更多 <i class="iconfont icon-arrow_right"></i></p>
                    </div>
                
                    <!-- 购买 -->
                    <div class="selling w">
                        <div class="imges">
                            <img src="./images/product.png" alt="">
                        </div>
                        <div class="text">
                            <h3>新鲜澳洲进口牛扒豪华套餐</h3>
                            <span><i class="iconfont icon-huore"></i>
                                 <i>月售<i class="sl">236份</i></i>
                            </span>
                            <span><i class="iconfont icon-haoping"></i>
                                    <i>好评<i class="sl">100%</i></i>
                            </span>
                            <p><i class="iconfont icon-dianpu"></i>
                                <i>澳洲牛扒（澳洲大酒店）</i></p>
                                <span class="jg"><i>￥</i>99</span>
                                <div class="order">
                                    <p>立即下单</p>
                                </div>
                        </div>
                    </div>
                    <div class="selling-one w">
                        <div class="imges">
                            <img src="./images/product.png" alt="">
                        </div>
                        <div class="text">
                            <h3>新鲜澳洲进口牛扒豪华套餐</h3>
                            <span><i class="iconfont icon-huore"></i>
                                 <i>月售<i class="sl">236份</i></i>
                            </span>
                            <span><i class="iconfont icon-haoping"></i>
                                    <i>好评<i class="sl">100%</i></i>
                            </span>
                            <p><i class="iconfont icon-dianpu"></i>
                                <i>澳洲牛扒（澳洲大酒店）</i></p>
                                <span class="jg"><i>￥</i>99</span>
                                <div class="order">
                                    <p>立即下单</p>
                                </div>
                        </div>
                    </div>
                    </div>
                    <!-- 广告位 -->
                    <div class="shucai w">
                        <img src="./images/ad.png" alt="">
                    </div>
                
                
                    <!-- 销售区 -->
                    <div class="sales-copy w">
                        <!-- 导航 -->
                        <div class="navigation">
                            <h3>新品推荐</h3>
                            <p>更多 <i class="iconfont icon-arrow_right"></i></p>
                        </div>
                    
                        <!-- 购买 -->
                        <div class="selling w">
                            <div class="imges">
                                <img src="./images/product.png" alt="">
                            </div>
                            <div class="text">
                                <h3>新鲜澳洲进口牛扒豪华套餐</h3>
                                <span><i class="iconfont icon-huore"></i>
                                    <i>月售<i class="sl">236份</i></i>
                                </span>
                                <span><i class="iconfont icon-haoping"></i>
                                        <i>好评<i class="sl">100%</i></i>
                                </span>
                                <p><i class="iconfont icon-dianpu"></i>
                                    <i>澳洲牛扒（澳洲大酒店）</i></p>
                                    <span class="jg"><i>￥</i>99</span>
                                    <div class="order">
                                        <p>立即下单</p>
                                    </div>
                            </div>
                        </div>
                        <div class="selling-one w">
                            <div class="imges">
                                <img src="./images/product.png" alt="">
                            </div>
                            <div class="text">
                                <h3>新鲜澳洲进口牛扒豪华套餐</h3>
                                <span><i class="iconfont icon-huore"></i>
                                    <i>月售<i class="sl">236份</i></i>
                                </span>
                                <span><i class="iconfont icon-haoping"></i>
                                        <i>好评<i class="sl">100%</i></i>
                                </span>
                                <p><i class="iconfont icon-dianpu"></i>
                                    <i>澳洲牛扒（澳洲大酒店）</i></p>
                                    <span class="jg"><i>￥</i>99</span>
                                    <div class="order">
                                        <p>立即下单</p>
                                    </div>
                            </div>
                        </div>
                        </div>
    </div>
                <!-- 底部 -->
                <div class="bottom">
                    <ul>
                        <li> <i class="iconfont icon-home"></i> <p>首页</p></li>
                        <li><i class="iconfont icon-category"></i> <p>分类</p></li>
                        <li><i class="iconfont icon-orders"></i> <p>订单</p></li>
                        <li><i class="iconfont icon-my"></i> <p>我的</p></li>
                    </ul>
                </div>
    <!-- 底部固定区域 -->
    <div class="foot">
        <div class="box">
            <span class="iconfont icon-home"></span>
            <i>首页</i>
        </div>
        <div class="box">
            <span class="iconfont icon-category"></span>
            <i>分类</i>
        </div>
        <div class="box">
            <span class="iconfont icon-orders"></span>
            <i>订单</i>
        </div>
        <div class="box">
            <span class="iconfont icon-my"></span>
            <i>我的</i>
        </div>
    </div>
</body>
</html>